Clase de HTML5 - Etiquetas Avanzadas

Tablas, Hipervinculos, formularios y botones

Tablas en HTML5

Ejemplo de tabla con productos
Producto	Precio	Cantidad
Lápices	$1.500	100
Cuadernos	$3.000	50
Total de productos		150

Buscador Google

Explicación:

Usamos <table> para crear la tabla
<thead> para el encabezado
<tbody> para el cuerpo de la tabla
<tfoot> para el pie de tabla
colspan para unir celdas horizontalmente
href para crear vinculos hacia otros sitios por fuera de la pagina web

Formularios en HTML5

Información personal Nombre:

Email:

Edad:

Fecha de nacimiento:

País:

Mensaje:

Preferencias

Selecciona tus intereses:

Deportes Música Lectura

Selecciona tu género:

Masculino Femenino Otro

Explicación:

<form> crea un formulario
<fieldset> agrupa elementos relacionados
<legend> añade título al grupo
<input> con diferentes tipos: text, email, number, date, etc.
<select> crea listas desplegables
<textarea> para textos largos

Botones en HTML5

Tipos de botones:

Botones con diferentes estilos (sin CSS):

Explicación:

<button> crea un botón clickeable
El atributo type define su comportamiento
Puede tener texto o incluso imágenes dentro
El atributo disabled desactiva el botón
boton de registro envia los datos del formulario